<template>
    <div>
        <c-header :p-title="'权限详情'">
            <div class="d-flex justify-content-end align-items-center">
                <button type="button" class="btn btn-sm btn-info d-lg-block"  @click="$router.go(-1)"><i class="fa fa-mail-reply m-r-sm"></i>返回</button>
                <btn-refresh class='m-l-15' :p-data='init'></btn-refresh>
            </div>
        </c-header>
        <div class="row page-content">
            <div class="col-md-12">
                <div class="card card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="panel-heading search-heading">
                                        <small class="text-muted">角色设置权限选项：</small>
                                        <div class="m-b-sm m-t-sm">
                                            <form class="clearfix" action="javascript:void(0)">
                                                <div class="pull-left m-r m-b-sm">
                                                    <label class="control-label">角色：</label>
                                                    <status-select class='thumb-search' :p-data="search.role_id" p-name="role" :p-def="true" :p-clearable="false" :p-far='true'  @on-change='searchSelectRole'></status-select>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div  v-if="screenShow">
                                        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                                            <Checkbox
                                                    :indeterminate="indeterminate"
                                                    :value="checkAll"
                                                    @click.prevent.native="handleCheckAll">全选</Checkbox>
                                            <btn-submit class="btn btn-sm btn-success pull-right" type="button" :p-click="setPowerChange">确认设置</btn-submit>
                                        </div>
                                        <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
                                            <Checkbox v-for="item in list" :key="item.field" :label="item.field">{{item.name}}</Checkbox>
                                        </CheckboxGroup>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import serConference from '../../serves/api-conference'
    let searchDef = {
        role_id:'',
    };
    export default{
        props:{
            pParams:Object
        },
        data(){
            return{
                screenShow: false,
                search:{},
                list: {},

                indeterminate: true,
                checkAll: false,
                checkAllGroup: []
            }
        },
        computed:{
        },
        mounted(){
            this.$set(this,'search',searchDef);
            if(this.search.role_id!=''){
                this.init();
            }
        },
        methods:{
            async init(){
                this.$set(this, 'screenShow', false);
                let res = await serConference.getRole({
                    role_id:this.search.role_id
                });
                if (res.code == 1) {
                    var a = [];
                    res.data&&res.data.forEach((v,i)=>{
                        if(v.has == 1){
                            a.push(v.field);
                        }
                    });
                    if(a.length == res.data.length){
                        this.indeterminate = false;
                        this.checkAll = true;
                    } else if (a.length > 0) {
                        this.indeterminate = true;
                        this.checkAll = false;
                    } else {
                        this.indeterminate = false;
                        this.checkAll = false;
                    }
                    this.checkAllGroup = a;
                    this.$set(this, 'list',res.data||[]);
                    this.$set(this, 'screenShow', true);
                } else {
                    this.$Message.error(res.message);
                    this.list = [];
                }
            },
            searchSelectRole(value){
                this.$set(this.search,'role_id',value);
                this.init();
            },
            handleCheckAll () {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;

                if (this.checkAll) {
                    //全选
                    var a = [];
                    this.list.forEach((v,i)=>{
                        a.push(v.field);
                    });
                    this.checkAllGroup = a;
                } else {
                    this.checkAllGroup = [];
                }
            },
            checkAllGroupChange (data) {
                if (data.length == this.list.length) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            },
            async setPowerChange(){
                let res = await serConference.setRole({
                    role_id:this.search.role_id,
                    field:this.checkAllGroup,
                });
                if(res.code==1){
                   this.$Message.success(res.message)
                }else {
                    this.$Message.error(res.message)
                }
            }
        },
        components:{
        }
    }
</script>